<template>
  <page-header-wrapper>
    <div class="table-page-search-wrapper">
      <a-card>
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="管理员账号">
                <a-input v-model="search.username" :allowClear="true"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="管理员身份">
                <a-select v-model="search.level" placeholder="请选择" default-value="">
                  <a-select-option :value="null">全部</a-select-option>
                  <a-select-option :value="1">超级管理员</a-select-option>
                  <a-select-option :value="2">管理员</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="使用状态">
                <a-select v-model="search.state" placeholder="请选择" default-value="">
                  <a-select-option :value="null">全部</a-select-option>
                  <a-select-option :value="1">启用中</a-select-option>
                  <a-select-option :value="0">已禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-button type="primary" @click="searchAdmin">查询</a-button>
              <a-button style="margin-left: 8px" @click="clearData">重置</a-button>
            </a-col>
            <a-modal
              :visible="state.v1"
              @ok="addAdmin"
              @cancel="handleCancelV1"
            >
              <a-row type="flex" justify="center" align="top">
                <a-col :span="18">
                  <a-form layout="horizontal">
                    <a-form-item style="margin-top: 10px"></a-form-item>

                    <a-form-item label="管理员账号" v-if="type==='add'"
                                 :label-col="{span: 6}"
                                 :wrapper-col="{ span: 18 }"
                    >
                      <a-input-group size="large">
                        <a-row>
                          <a-col>
                            <a-input v-model="data.username"/>
                          </a-col>
                        </a-row>
                      </a-input-group>
                    </a-form-item>
                    <a-form-item label="管理员邮箱"
                                 :label-col="{span: 6}"
                                 :wrapper-col="{ span: 18 }"
                    >
                      <a-input-group size="large">
                        <a-row>
                          <a-col>
                            <a-input v-model="data.mail"/>
                          </a-col>
                        </a-row>
                      </a-input-group>
                    </a-form-item>
                    <a-form-item label="管理员密码"
                                 :label-col="{span: 6}"
                                 :wrapper-col="{ span: 18 }"
                    >
                      <a-input-group size="large">
                        <a-row>
                          <a-col>
                            <a-input v-model="data.password"/>
                          </a-col>
                        </a-row>
                      </a-input-group>
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
            </a-modal>
            <a-modal
              :visible="state.v2"
              @ok="updateAdmin"
              @cancel="handleCancelV2"
            >
              <a-row type="flex" justify="center" align="top">
                <a-col :span="18">
                  <a-form layout="horizontal">
                    <a-form-item style="margin-top: 10px"></a-form-item>

                    <a-form-item label="管理员账号" v-if="type==='add'"
                                 :label-col="{span: 6}"
                                 :wrapper-col="{ span: 18 }"
                    >
                      <a-input-group size="large">
                        <a-row>
                          <a-col>
                            <a-input :disabled="state.v3" v-model="data.username"/>
                          </a-col>
                        </a-row>
                      </a-input-group>
                    </a-form-item>

                    <a-form-item label="管理员邮箱"
                                 :label-col="{span: 6}"
                                 :wrapper-col="{ span: 18 }"
                    >
                      <a-input-group size="large">
                        <a-row>
                          <a-col>
                            <a-input v-model="data.mail"/>
                          </a-col>
                        </a-row>
                      </a-input-group>
                    </a-form-item>

                    <a-form-item label="管理员密码"
                                 :label-col="{span: 6}"
                                 :wrapper-col="{ span: 18 }"
                    >
                      <a-input-group size="large">
                        <a-row>
                          <a-col>
                            <a-input v-model="data.password"/>
                          </a-col>
                        </a-row>
                      </a-input-group>
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
            </a-modal>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="操作">
                <a-button type="primary" @click="openModel('add')" style="margin-left: 8px">添加管理员</a-button>
              </a-form-item>

            </a-col>

          </a-row>
        </a-form>

        <a-table :pagination="false" bordered :columns="columns" :data-source="data_">
            <span slot="state" slot-scope="text, record">
                <a-badge :color="Number(text)===1?'green':'red'" :text="Number(text)===1?'启用中':'已禁用'"/>
            </span>
          <span slot="action" slot-scope="text, record">
                <a v-if="record.level!=1" @click="changeState(record)">{{ record.state == 1 ? '禁用' : '启用' }}</a>
                <a-divider type="vertical" v-if="record.level!=1"/>
                <a v-if="record.level!=1" @click="deleteAdmin(record)">删除</a>
                <a-divider type="vertical" v-if="record.level!=1"/>
                <a @click="openModelV2(record)"> 修改 </a>
            </span>
        </a-table>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import {getAdminList, addAdmin, updateAdmin, deleteAdmin} from '@/api/admin'

const columns = [
  {
    title: '管理员帐号',
    dataIndex: 'username',
    key: 'name',
    scopedSlots: {customRender: 'name'}
  },
  {
    title: '管理员邮箱',
    dataIndex: 'mail',
    key: 'mail'
  },
  {
    title: '管理员身份',
    dataIndex: 'level',
    key: 'level',
    customRender(text) {
      return Number(text) === 1 ? '超级管理员' : '管理员'
    }
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    scopedSlots: {customRender: 'state'}
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'id',
    scopedSlots: {customRender: 'action'},
  },
]

export default {
  name: "adminController",
  data() {
    return {
      search: {
        username: '',
        mail: '',
        state: null,
        level: null,
      },
      data: {
        id: '',
        username: '',
        mail: '',
        password: '',
        level: null,
        state: ''
      },
      state: {
        v1: false,
        v2: false,
        v3: false
      },
      type: 'add',
      columns,
      data_: []
    }
  },
  mounted() {
    this.searchAdmin()
  },
  methods: {
    searchAdmin() {
      let _this = this;
      getAdminList({
        username: this.search.username.trim() === '' ? null : this.search.username.trim(),
        state: this.search.state === null ? null : this.search.state,
        mail: this.search.mail.trim() === '' ? null : this.search.mail.trim(),
        level: this.search.level === null ? null : this.search.level,
      }).then(res => {
        _this.data_ = res.data
      });
    },
    clearData() {
      this.search.username = '';
      this.search = {
        username: '',
        mail: '',
        state: null,
        level: null,
      }
      this.searchAdmin();
    },
    addAdmin() {
      let _this = this;
      if (this.data.username.length < 6) {
        _this.$notification.warning({
          message: '用户名应大于等于六个字符'
        })
        return
      } else if (this.data.mail.length < 6) {
        _this.$notification.warning({
          message: '邮箱应大于等于六个字符'
        })
        return
      } else if (this.data.password.length < 6) {
        _this.$notification.warning({
          message: '密码应大于等于六个字符'
        })
        return
      }
      addAdmin({
        username: this.data.username,
        mail: this.data.mail,
        password: this.data.password,
      }).then(res => {
        if (res.status == 200) {
          _this.$notification.warning({
            message: res.message
          })
          _this.state.v1 = false;
          _this.searchAdmin();
        } else {
          _this.$notification.warning({
            message: res.message
          })
        }
      }).catch(e => {
        _this.$notification.warning({
          message: e.message
        })
      })
    },
    deleteAdmin(record) {
      console.log(111)
      let _this = this;
      this.$confirm({
        title: '确定删除该管理员么?',
        onOk() {
          deleteAdmin({
            id: record.id
          }).then(res => {
            if (res.status == 200) {
              _this.$notification.warning({
                message: res.message
              })
              _this.state.v2 = false;
            } else {
              _this.$notification.warning({
                message: res.message
              })
            }
            _this.searchAdmin();
          }).catch(e => {
            _this.$notification.warning({
              message: e.message
            })
            _this.searchAdmin();
          })

        },
      });
    },
    updateAdmin() {
      if (this.data.id == '') {
        _this.$notification.warning({
          message: 'id不能为空'
        })
      } else {
        let _this = this;
        updateAdmin({
          id: this.data.id,
          password: this.data.password === '' ? null : this.data.password,
          username: this.data.name === '' ? null : this.data.username,
          state: this.data.state === null ? null : this.data.state,
          level: this.data.state === null ? null : this.data.level,
          mail: this.data.state === null ? null : this.data.mail,
        }).then(res => {
          if (res.status == 200) {
            _this.$notification.warning({
              message: res.message
            })
            _this.state.v2 = false;
          } else {
            _this.$notification.warning({
              message: res.message
            })
          }
          _this.searchAdmin();
        }).catch(e => {
          _this.$notification.warning({
            message: e.message
          })
          _this.searchAdmin();
        })
      }
    },
    changeState(record) {
      console.log(record)
      let _this = this;
      this.$confirm({
        title: '确定' + (record.state === 1 ? '禁用' : '启用') + '该管理员么?',
        onOk() {
          _this.data.id = record.id;
          _this.data.state = record.state == 1 ? 0 : 1
          updateAdmin({
            id: record.id,
            state: record.state == 1 ? 0 : 1
          }).finally(()=>{
            _this.searchAdmin();
          });
        },
      });
    },
    openModel() {
      this.data.id = '';
      this.data.name = '';
      this.data.username = '';
      this.data.password = '';
      this.state.v1 = true
    },
    openModelV2(record) {
      this.state.v3 = false
      this.data = JSON.parse(JSON.stringify(record))
      this.data.password = ''
      delete this.data.level
      this.state.v3 = true
      this.state.v2 = true
    },
    handleCancelV1() {
      this.state.v1 = false;
    },
    handleCancelV2() {
      this.state.v2 = false;
    }
  }
}
</script>

<style scoped>

</style>